<template>
    <tm-overlay :teleport="false" :overlayClick="false" bgColor="rgba(0,0,0,0.6)" v-model:show="visible" contentAnimation>
        <view @click.stop="">
            <view class="modal-content">
                <image class="vip-bg-image" mode="widthFix" :src="vip_bg_image" />
                <view class="content">
                    <tm-text :font-size="36" color="#825C20" label="查看今日运势..."></tm-text>
                    <ImageButton :image="vip_btn_image" @click="navigateTo(pageLink.vipActivated)">
                        <tm-text :font-size="32" color="#FFECB8" label="解锁VIP"></tm-text>
                    </ImageButton>
                </view>
            </view>
        </view>
    </tm-overlay>
</template>
<script setup lang="ts">
    import { defineProps, ref, watch } from 'vue'
    import vip_bg_image from '/static/assets/images/index/vip-bg.png'
    import vip_btn_image from '/static/assets/images/index/btn-vip.png'
    import ImageButton from '@/components/ImageButton/index.vue'
    import { pageLink } from '/constants/link.ts'
    import { navigateTo } from '/utils/index.ts'

    const props = defineProps({
        show: {
            type: Boolean,
            default: false
        }
    })

    const emit = defineEmits(['update:show'])

    const visible = ref(props.show)

    watch(() => props.show, (newVal) => {
        visible.value = newVal
    })

    watch(() => visible.value, (newVal) => {
        emit('update:show', newVal)
    })
</script>
<style lang="less" scoped>
    .modal-content {
        width: 524rpx;
        height: 346rpx;
        position: relative;
        z-index: 0;

        .vip-bg-image {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            z-index: -1;
        }

        .content {
            padding-top: 100rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .image-button {
            width: 244rpx;
            height: 80rpx;
            margin-top: 80rpx;
        }
    }
</style>